<template>
    <div class="landDetailBox">
        <div class="title">
            <label>地块详情</label>
            <div class="opbtn">
                <span v-if="detail.farmId == userStore.userInfo.farmId"><img src="/src/assets/dt1.png" alt="" @click="goEdit"/> </span>
                <span v-if="detail.farmId == userStore.userInfo.farmId"><img src="/src/assets/dt2.png" alt="" @click="del"/> </span>
                <span><img src="/src/assets/dt3.png" style="height: 15px;" alt="" @click="close"/> </span>
            </div>
        </div>
        <el-tabs v-model="activeName" type="card" style="margin-top:5px;">
            <el-tab-pane label="基本信息" name="first">
                <div class="tabContent">
                <base-info v-if="tabIndex==1" :detail="detail"/>
              </div>
            </el-tab-pane>
            <el-tab-pane label="土壤养分" name="second">
                <soilInfo :detail="detail" v-if="activeName=='second'" />
            </el-tab-pane>
            <el-tab-pane label="积雨积温" name="third">
                <temperature :detail="detail" v-if="activeName=='third'" />
            </el-tab-pane>
        </el-tabs>

       
    </div>
</template>
<script setup>
import {ref,onMounted,watch} from 'vue'
import{useRouter} from "vue-router"
import {getLandDetail,delFarmLand} from '@/api/plant'
import baseInfo from './components/baseInfo.vue'
import soilInfo from './components/soilInfo.vue'
import temperature from './components/temperature.vue'
import { ElMessageBox } from 'element-plus'
import { useUserStore } from '@/pinia/modules/user'

const router = useRouter()
const userStore = useUserStore()

const props = defineProps({
    farmLandId:'',
    farmLandPic:'',
    farmLandNo:''
})
const emit = defineEmits(['close','clickDel','eidt'])

const activeName = ref('first')
const tabIndex = ref(1)
const detail = ref({}) // 详情数据

onMounted(async ()=>{
    get_land_detail()
})

watch(()=>props.farmLandId,(n,o)=>{
    tabIndex.value = 1 
    get_land_detail()
})

const get_land_detail = ()=>{
getLandDetail(props.farmLandId).then(res=>{
    detail.value ={...res.data,...{farmLandPic:props.farmLandPic,farmLandNo:props.farmLandNo}}
})
}

const setTab = (index) =>{
    tabIndex.value = index
}

const goEdit= ()=>{
    emit('eidt',detail.value)
    // router.push(`/full/massif/add?farmLandId=${detail.value.farmLandId}&farmId=${detail.value.farmId}`)
  }

const del = (item)=>{
    emit('clickDel',detail.value)
  }

const close = ()=>{
    emit('close')
}
</script>

<style lang="scss" scoped>
.landDetailBox{
    padding: 20px;
    padding-top: 0;
    font-family: PingFangSC, PingFang SC;
    color: #333333;
    .title{
        display: flex;
        //align-items: center;
        height: 30px;
        margin: 15px 0 0 0;
        border-bottom: 1px solid #EDEDED;
        label{
            flex:1;
            display: flex;
            //align-items: center;
            font-size: 16px;
            font-weight: 600;
            &::before{
                content: '';
                display: flex;
                height: 16px;
                width: 4px;
                background-color: #FF9C00;
                margin: 0 9px 0 0;
            }
        }
    }
    .opbtn{
        display: flex;
        span{
            display: flex;
            height: 20px;
            align-items: center;
            padding: 0 15px;
            &+span{
                border-left: 1px solid #DCDCDC;
            }
            img{
                display: block;
                height: 100%;
                &:hover{
                    cursor: pointer;
                    opacity: 0.5;
                }
            }
        }
    }

    .tabContent{
        box-sizing: border-box;
        padding:20px 0 0 0;
        width: 100%;
        height: calc(100vh - 205px);
        overflow: hidden;
        overflow-y: auto;
    }
}

</style>